<!DOCTYPE html>
<html ng-app="notesApp">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body ng-controller="MainCtrl as ctrl">
		<button ng-click="ctrl.changeNotes()">Change Notes</button>
		<br />
		DOM Elements change every time someone clicks
		<div ng-repeat="note in ctrl.notes1">
			{{note.$$hashkey}}
			<span class='label'>{{note.label}}</span>
			<span class="author">{{note.done}}</span>
		</div>
		
		<br />
		
		DOM Elements are reused every time someone clicks
		<div ng-repeat="note in ctrl.notes2 track by note.id">
			{{note.$$hashkey}}
			<span class='label'>{{note.label}}</span>
			<span class="author">{{note.done}}</span>
		</div>
	</body>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		angular.module('notesApp', [])
		.controller('MainCtrl', [function(){
			var self = this;
			var notes = [
				{id: 1, label: 'First Note', done: false, someRandom: 31431},
				{id: 2, label: 'Second Note', done: false},
				{id: 3, label: 'Finished Third Note', done: true}
			];
			
			self.notes1 = angular.copy(notes);
			self.notes2 = angular.copy(notes);
			
			self.changeNotes = function(){
				notes = [
					{id: 1, label: 'Change Note', done: false, someRandom: 4242},
					{id: 2, label: 'Second Note', done: false},
					{id: 3, label: 'Finished Third Note', done: true}
				];
				self.notes1 = angular.copy(notes);
				self.notes2 = angular.copy(notes);
			};
			
		}]);
	</script>
</html>
